<template>
  <div v-loading="loadings" class="app-container">
    <!-- 医院信息 -->
    <h5 class="titleInfo">医院信息</h5>
    <el-form ref="list" :inline="true" :model="list" label-width="130px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="医院名称">
            <span class="spanToInput">{{ list.hospitalName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="回款单号">
            <span class="spanToInput">{{ list.repaymentSn | filterNull }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="未回款">
            <span class="spanToInput">{{ list.accruedAmount }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="流水单号">
            <span class="spanToInput">{{ list.orderSn }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="应回款金额">
            <span class="spanToInput">{{ list.receivableAmount | filterNull }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
                    <el-form-item label="核销金额">
                        <span class="spanToInput">{{list.verifyAmount | filterNull}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="剩余回款金额">
                        <span class="spanToInput">{{list.accruedAmount | filterNull}}</span>
                    </el-form-item>
                </el-col>
        <el-col :span="12">
          <el-form-item label="已回款金额">
            <span class="spanToInput">{{ list.receivedAmount | filterNull }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="回款状态">
            <span class="spanToInput">{{ list.status | RS }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间">
            <span class="spanToInput">{{ list.createdAt | filterNull }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 汇款单回款信息 -->
    <div class="divBar" />
    <h5 class="titleInfo">回款单回款信息</h5>
    <div style="margin:0 20px 20px">
      <el-table
        :data="backData"
        class="tableData"
        show-summary
        :summary-method="getSummaries"
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" align="center" />

        <el-table-column prop="orderSn" label="流水单号" align="center" />

        <el-table-column prop="repaymentSn" label="回款单号" align="center" />
        <el-table-column prop="paymentSn" label="付款单号" align="center" />
        <el-table-column prop="receivedAmount" label="回款金额" align="center" />
        <el-table-column prop="status" label="付款单状态" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.status | Rstatus }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="createdAt" label="回款时间" align="center" />
      </el-table>
    </div>

    <!-- 流水单金额修改 -->
    <div class="divBar" />
    <h5 class="titleInfo">流水单金额修改</h5>
    <div style="margin:0 20px 20px">
      <el-table :data="tableData" class="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" align="center" />

        <el-table-column prop="orderSn" label="流水单号" align="center" />
 <el-table-column prop="payType" label="付款方式" align="center" />
        <el-table-column prop="amendmentAgo" label="修改前金额" align="center" />
        <el-table-column prop="amendmentLater" label="修改后金额" align="center" />
        <el-table-column prop="amendmentAmount" label="修改金额" align="center" />

        <el-table-column prop="createdAt" label="修改时间" align="center" />
      </el-table>
    </div>
  </div>
</template>
<script>
import { getRepaymentDetail, flowRecordList } from '@/api/financialBack'
export default {
  filters: {
    filterNull(e) {
      if (!e) {
        return '暂无'
      } else {
        return e
      }
    },
    RS: function(e) {
      switch (e) {
        case '1':
          return '已回款'
        case '2':
          return '未回款'
        case '3':
          return '部分回款'
        case '4':
          return '未抵扣'
        case '5':
          return '已抵扣'
        case '6':
          return '抵扣中'
        case '7':
          return '已付款'
        default:
          return '暂无'
      }
    },
    Rstatus: function(e) {
      switch (e) {
        case '0':
          return '待审核'
        case '2':
          return '审核通过'
        case '1':
          return '已付款'
        default:
          return '暂无'
      }
    }
  },
  data() {
    return {
      loadings: true,
      backData: [],
      tableData: [],
      userId: '',
      orderSn: '',
      list: {}
    }
  },
  created() {
    this.userId = String(this.$route.query.userId)
    this.orderSn = this.$route.query.orderSn
  },
  mounted() {
    this.getList()
  },
  methods: {
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价'
          return
        }
        console.log(columns)
        let receivedAmount = 0
        data.map(res => {
          receivedAmount += res.receivedAmount - 0
        })
        switch (column.property) {
          case 'receivedAmount':
            sums[index] = receivedAmount
            break
          default:
            break
        }
      })
      return sums
    },
    getList() {
      getRepaymentDetail({
        id: this.userId
      })
        .then(res => {
          // this.loadings = false
          // console.log(res);
          if (res.data.code == 0) {
            this.backData = res.data.data.list
            this.list = res.data.data
          } else {
            this.$message.error(res.data.msg)
          }
        })
        .catch(error => {
          this.$message.error(error)
        })
      flowRecordList({
        orderSn: this.orderSn
      }).then(res => {
        // console.log(res);
        this.loadings = false
        if (res.data.code == 0) {
          this.tableData = res.data.data.list
        } else {
          this.$message.error(res.data.msg)
        }
      })
    }
  }
}
</script>

<style scoped>
.app-container {
    padding: 0px !important;
}
.form {
    margin-left: 268px;
}
</style>
